<template>
  <div class="search-container">
    <!-- 搜索框 -->
    <div class="search-bar">
      <input type="text" v-model="searchQuery" placeholder="请输入搜索内容" @input="handleSearch" />
      <button @click="clearSearch">取消</button>
    </div>

    <!-- 筛选选项 -->
    <div class="filter-options">
      <div class="option">
        <span>影片</span>
        <select v-model="selectedCategory">
          <option value="all">全部频道</option>
          <option v-for="category in categories" :key="category" :value="category">{{ category }}</option>
        </select>
      </div>

      <div class="option">
        <span>默认排序</span>
        <select v-model="selectedSort">
          <option value="default">默认排序</option>
          <option value="newest">最新发布</option>
          <option value="popular">最受欢迎</option>
        </select>
      </div>

      <div class="option">
        <span>全部频道</span>
        <a href="#" @click.prevent="selectAllChannels">全部频道</a>
      </div>
    </div>

    <!-- 频道标签 -->
    <div class="channel-tags">
      <button
        v-for="category in categories"
        :key="category"
        :class="{ active: selectedCategory === category }"
        @click="selectCategory(category)"
      >
        {{ category }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 搜索查询
const searchQuery = ref('');

// 处理搜索输入
const handleSearch = () => {
  console.log('搜索内容:', searchQuery.value);
};

// 清除搜索
const clearSearch = () => {
  searchQuery.value = '';
};

// 频道分类
const categories = [
  '全部',
  '创意',
  '励志',
  '搞笑',
  '运动',
  '旅行',
  '爱情',
  '广告',
  '动画',
  '剧情',
  '音乐',
  '科幻',
  '纪录',
  '预告',
  '混剪',
  '实验',
  '生活',
  '时尚',
  '汽车',
  '游戏',
  '美食'
];

// 当前选择的分类
const selectedCategory = ref('全部');

// 选择分类
const selectCategory = (category: string) => {
  selectedCategory.value = category;
};

// 选择所有频道
const selectAllChannels = () => {
  selectedCategory.value = '全部';
};

// 默认排序选项
const selectedSort = ref('default');
</script>

<style scoped>
.search-container {
  background-color: #121212;
  color: #fff;
  padding: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: #222;
  color: #fff;
}

.search-bar button {
  margin-left: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #444;
  color: #fff;
  cursor: pointer;
}

.filter-options {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.option {
  display: flex;
  align-items: center;
}

.option span {
  margin-right: 10px;
}

.channel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.channel-tags button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

.channel-tags button.active {
  background-color: #007bff;
}
</style>